import { SvgIcon } from '@/components/icon';
import { OpType } from '@/types/enum';
import {
  Category,
  DuplicateCollection,
  FeedbackQuestionType,
  FreqQuestionType,
  KnowCollection,
  KnowSimilarityCollection,
  TodoGov,
  UnknowQuestionType,
} from '@/types/know/know';
import { DownOutlined, UpOutlined } from '@ant-design/icons';
import { Button, Popconfirm, Tag } from 'antd';
import { Ellipsis } from 'antd-mobile';
import dayjs from 'dayjs';
import { memo, useMemo } from 'react';

interface Props {
  todo: TodoGov;
  onHandle?: (todo: TodoGov, type: OpType) => void;
}

interface CategoryMap {
  title: string;
  color: string;
  info?: React.ReactNode;
  action?: React.ReactNode;
}

const KnowItem = ({ todo, onHandle }: Props) => {
  const onHandleClicked = (type: OpType = OpType.update) => {
    onHandle && onHandle(todo, type);
  };

  const categoryMap: CategoryMap = useMemo(() => {
    switch (todo.category) {
      case Category.ExpireCollection:
        const kc = todo as KnowCollection;
        return {
          title: kc.name,
          color: 'bg-[#E8FCFF] border-[#38C2FF] border !text-[#38C2FF]',
          info: <div>有效期至 {dayjs(kc.expiredTime).format('YYYY-MM-DD')}</div>,
          action: (
            <div className="ml-auto flex gap-2">
              <Button
                size="small"
                type="text"
                onClick={() => {
                  onHandleClicked();
                }}
              >
                <span className="flex items-center text-primary">
                  <SvgIcon icon="message-ic19" size="16" className="mr-1" />
                  处理
                </span>
              </Button>
              <Popconfirm
                title={`您确定要删除文件 ${kc.name} 吗?`}
                onConfirm={() => {
                  onHandleClicked(OpType.delete);
                }}
                okText="删除"
                cancelText="取消"
              >
                <Button size="small" type="text">
                  <span className="flex items-center text-error">
                    {' '}
                    <SvgIcon icon="message-ic3" size="16" className="mr-1" />
                    删除
                  </span>
                </Button>
              </Popconfirm>
            </div>
          ),
        };
      case Category.ConflictCollection:
        const cc = todo as KnowSimilarityCollection;
        return { title: cc.name, color: 'bg-[#4CAF50]' };
      case Category.DuplicateCollection:
        const ksc = todo as KnowSimilarityCollection;
        return {
          title: ksc.name,
          color: 'bg-[#E8F9F2] border-[#04C273] border !text-[#04C273]',
          action: (
            <Button
              size="small"
              className="ml-auto"
              type="text"
              onClick={() => {
                onHandleClicked();
              }}
            >
              <span className="flex items-center text-primary">
                <SvgIcon icon="message-ic19" size="16" className="mr-1" />
                处理
              </span>
            </Button>
          ),
        };
      case Category.FeedbackQuestion:
      case Category.FeedbackGoodQuestion:
        const fqt = todo as FeedbackQuestionType;
        const color =
          todo.category === Category.FeedbackQuestion
            ? 'bg-functional-orange border-warning border !text-warning '
            : 'bg-functional-orange border-warning border !text-warning';
        return {
          title: fqt.keyQuestionText,
          color: color,
          info: (
            <div className="flex">
              反馈：
              <Ellipsis
                content={fqt.feedback}
                rows={1}
                expandText={<DownOutlined />}
                collapseText={<UpOutlined />}
              />
            </div>
          ),
          action: (
            <Button
              size="small"
              className="ml-auto"
              type="text"
              onClick={() => {
                onHandleClicked();
              }}
            >
              <span className="flex items-center text-primary">
                <SvgIcon icon="message-ic19" size="16" className="mr-1" />
                处理
              </span>
            </Button>
          ),
        };
      case Category.FrequentQuestion:
        const fq = todo as FreqQuestionType;
        return {
          title: fq.keyQuestionText,
          color: 'bg-functional-green border-primary border !text-primary',
          info: <div>相关问题 {fq?.total}</div>,
          action: (
            <Button
              size="small"
              className="ml-auto"
              type="text"
              onClick={() => {
                onHandleClicked();
              }}
            >
              <span className="flex items-center text-primary">
                <SvgIcon icon="message-ic19" size="16" className="mr-1" />
                处理
              </span>
            </Button>
          ),
        };
      case Category.UnknownQuestion:
        const uq = todo as UnknowQuestionType;
        return {
          title: uq.keyQuestionText,
          color: 'bg-functional-red border-error border !text-error',
          info: <div>相关问题 {uq?.total}</div>,
          action: (
            <Button
              size="small"
              className="ml-auto"
              type="text"
              onClick={() => {
                onHandleClicked();
              }}
            >
              <span className="flex items-center text-primary">
                <SvgIcon icon="message-ic19" size="16" className="mr-1" />
                处理
              </span>
            </Button>
          ),
        };
      case Category.SensitiveWord:
        return { title: '敏感词', color: 'bg-[#FFC107]' };
      case Category.SpecialtyWord:
        return { title: '专业词', color: 'bg-[#00BCD4]' };
      case Category.SynonymWord:
        return { title: '同义词', color: 'bg-[#8BC34A]' };
      default:
        return { title: '未知', color: 'bg-[#9C27B0]' };
    }
  }, [todo]);

  return (
    // <div className="m-4 ml-0 cursor-pointer rounded-lg border-b border-[#F2F3F5] p-3 transition-transform hover:scale-105">
    <div className=" ml-0 cursor-pointer  border-b border-[#F2F3F5] p-3 pl-0 ">
      <div className="truncate text-sm">{categoryMap.title}</div>
      {categoryMap.info ? (
        <div className="mt-2  ">
          <div
          // style={{ padding: '5px' }}
          // className={`my-2  rounded-[4px] text-center text-xs text-white ${categoryMap.color}`}
          >
            <span
              className={`inline-block !h-[22px] rounded-[4px] px-2 text-center text-xs leading-[20px] text-white ${categoryMap.color}`}
            >
              {todo.category}
            </span>
          </div>
          {/* {(todo.status === 1 || todo.status === 2) && (
            <div style={{ padding: '5px' }} className={`rounded-md bg-[#805EEE] text-xs text-white`}>
              已处理
            </div>
          )} */}

          <div className="flex items-center justify-between">
            <div className="w-[90%] truncate text-[#8C8C8C]">{categoryMap.info}</div>
            <div className="flex items-center justify-between">{categoryMap.action}</div>
          </div>
        </div>
      ) : (
        <div className="mt-2  flex items-center justify-between">
          <div
            style={{ padding: '5px' }}
            className={` rounded-[4px] text-xs text-white ${categoryMap.color}`}
          >
            {todo.category}
          </div>
          <div className="flex items-center justify-between">
            <div className="text-[#8C8C8C]">{categoryMap.info}</div>
            <div className="flex items-center justify-between">{categoryMap.action}</div>
          </div>
        </div>
      )}
    </div>
  );
};

export default memo(KnowItem);
